<template>
    <div class="app">
        <header class="mint-header"><div class="mint-header-button is-left"><a href="#/home" class="router-link-active"><button class="mint-button mint-button--default mint-button--normal"><span class="mint-button-icon"><i class="mintui mintui-back"></i></span> <label class="mint-button-text"></label></button></a></div> <h1 class="mint-header-title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;  font-size:16px;">神经药品</font></font></h1> <div class="mint-header-button is-right"><button class="mint-button mint-button--default mint-button--normal"><span class="mint-button-icon"><i class="mintui mintui-more"></i></span> <label class="mint-button-text"></label></button></div></header>
        <div><img src="http://127.0.0.1:3000/img/shenjing1.jpg" alt=""></div>
        <div><img src="http://127.0.0.1:3000/img/rexiaotuijian.png" alt=""></div>
    
        <div>
             <div class="shenjinglist">
                <div class="shenjing-item" v-for="item of list" :key="item.id">
                 <img :src="item.pic" alt="">
                <p class="title">{{item.title}}</p>
                <p class="info">{{item.info}}</p>
                <p class="btn-shenjing">
                <span class="price">￥{{item.price.toFixed(2)}}</span>
                <span class="sale">立即购买</span>
                </p>
            </div>
           </div>
            
        </div>
            
        
    </div>
    
</template>
<script>
    export default{
        data(){return{list:[]}},
        methods:{
            getshenjing(){
                var url="http://127.0.0.1:3000/getshenjing";
                this.$http.get(url).then(result=>{
                    this.list=result.body;
                    console.log(this.list);
                });
            },
        },
        created() {
            
         
                 console.log(1)
                 this.getshenjing();
                  }
    }
</script>
<style>
.shenjinglist{
       display: flex;
       flex-wrap:wrap;
       justify-content:space-between;
       padding: 5px; 
       
   }
   .shenjinglist .shenjing-item{
       width: 49%;
       height: 266px;
       border: 1px solid #ccc;
       border-radius:10px; 
       box-shadow: 0 0 8px #ccc;
       margin-bottom: 10px;
       
       
   }
   .shenjinglist .shenjing-item img{
    display: block;
    width: 154px;
    height: 154px;
    margin: 10px;
    margin: 10px auto;
   }
   .shenjinglist .shenjing-item p{
       margin: 0 10px 0 10px;
       height: 19px;
       
       
   }
   .shenjinglist .shenjing-item .title{
       color: red;
       white-space:nowrap;
       overflow:hidden;
       text-overflow:ellipsis;
   }
   .shenjinglist .shenjing-item .info{
       margin-bottom: 10px;
       white-space:nowrap;
       overflow:hidden;
       text-overflow:ellipsis;
   }
   .shenjinglist .shenjing-item span{
      
       font-size: 15px;
   }
   .btn-shenjing{
       display: flex;
       justify-content: space-between;
    
   }
   .shenjinglist .shenjing-item .btn-shenjing .sale{
       display: inline-block;
       height: 30px;
       width: 68px;
       text-align: center;
       line-height: 30px;
       margin-right: 10px;
       border: 1px solid red;
       border-radius: 15px;
       background: #f40;
       color: aliceblue;
       font-size: 12px;
       
       
   }
   .tuijain{
       margin-top:10px;
       margin-bottom: 10px; 
   }

</style>
